<include file="Public/mobile_head_list_jquery"/>
<body>
<div class="easyui-navpanel">
    <header>
        <div class="m-toolbar">
            <div class="m-title">课程列表</div>
            <div class="m-left">
                <a href="__SELF__" class="easyui-linkbutton" data-options="plain:true">全部</a>
            </div>
            <div class="m-right">
                <a href="javascript:void(0)" class="easyui-menubutton"
                   data-options="iconCls:'icon-more',plain:true,hasDownArrow:false,menu:'#mm',menuAlign:'right'"></a>
            </div>
        </div>
    </header>
    <div id="mm" class="easyui-menu" style="width:150px;" data-options="itemHeight:30,noline:true">
        <div data-options="iconCls:'icon-undo'"><a href="__SELF__">全部</a></div>
        <div class="menu-sep"></div>
        <div>升学</div>
        <div class="menu-sep"></div>
        <div>语文</div>
        <div>数学</div>
        <div>英语</div>
    </div>
    <div class="easyui-tabs"
         data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true">
        <div id="all-list" style="padding:10px">
            <div class="panel-header tt-inner">
                <br>公开课表
            </div>
            <ul class="easyui-datalist m-list" data-options="
                fit: true,
                lines: true,
                border: false,
                textFormatter: function(value){
                    return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
                },
                ">
                    <li v-for="item in items" class="tt">
                        <span id="detail-id" style="display: none">{{item.id}}</span>
                        <div style="display: inline-block;width:70%">
                            <h3 style="font-size: 16px;height: 30%">{{item.title}}</h3>

                            <div class="list-wenzi-div" style="margin-top: 10px;">
                                <div style="width:140px;" class="colorless">{$vo.course_time}</div>
                                <div style="">讲师：{$vo.author}</div>
                                <div style="width:100px;"><span style="color: #f00">{$vo.view_count}</span>人报名</div>
                            </div>
                        </div>
                    </li>
            </ul>
        </div>
        <div id="my-list" style="padding:10px">
            <div class="panel-header tt-inner">
                <br>我的公开课
            </div>
            <ul class="easyui-datalist m-list" data-options="
                fit: true,
                lines: true,
                border: false,
                textFormatter: function(value){
                    return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
                },
                ">
                <li v-for="item in items" class="tt">
                    <span id="detail-id" style="display: none">{{item.id}}</span>
                    <div style="display: inline-block;width:70%">
                        <h3 style="font-size: 16px;height: 30%">{{item.title}}</h3>

                        <div class="list-wenzi-div" style="margin-top: 10px;">
                            <div style="width:140px;" class="colorless">{$vo.course_time}</div>
                            <div style="">讲师：{$vo.author}</div>
                            <div style="width:100px;"><span style="color: #f00">{$vo.view_count}</span>人报名</div>
                        </div>
                    </div>
                </li>
            </ul>

        </div>
    </div>
</div>
<style scoped>
    .tt-inner {
        display: inline-block;
        line-height: 12px;
        padding-top: 5px;
    }

    p {
        line-height: 150%;
    }

    .list-wenzi-div div {
        padding-right: 10px;
        float: left;
    }

    .top-line {
        border-top: 1px solid #ccc;
        padding: 15px 0 10px 0;
    }
</style>
<div id="p2" class="easyui-navpanel">

    <div class="easyui-tabs"
         data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true">
        <!--onclick='window.location.href="?s=/addon/Reserve/Wap/index/reserve_id/1/publicid/2.html&publicid=2&openid=-2"'-->
        <div style="padding:10px">
            <div id="go-to-apply" class="panel-header tt-inner">
                我要报名
            </div>
            <section class="content">
                <div id="course-id" style="display: none"></div>
                <p id="p2-pic-url"><img src="{$info.cover|get_cover_url}"/></p>

                <h3 id="p2-title" style="font-weight: bolder;font-size: 20px; margin: 15px 0px;">{$info.title}</h3>

                <div class="top-line">
                    <h4 style="display: inline-block">开课时间：</h4><span id="p2-start-time">{$info.start_time}~{$info.end_time}</span>
                </div>
                <div class="top-line">
                    <h4 style="display: inline-block">主讲老师：</h4><span id="p2-author">{$info.author}</span>
                </div>
                <h4 class="top-line">课程介绍：</h4>

                <p id="p2-content"></p>
                {$info.content|htmlspecialchars_decode}
            </section>
        </div>
        <div style="padding:10px">
            <div id="click-enter" class="panel-header tt-inner">
                点击进入
            </div>

            <section class="content">
                <notempty name="info.cover"><p><img src="{$info.cover|get_cover_url}"/></p></notempty>
                {$info.content|htmlspecialchars_decode}
            </section>
        </div>
    </div>
</div>
<div id="p3" class="easyui-navpanel">
    <header>
        <div class="m-toolbar">
            <div class="m-title">Panel2</div>
            <div class="m-left">
                <a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true"
                   style="width:50px">Back</a>
            </div>
        </div>
    </header>
    <div style="margin:50px 0 0;text-align:center">
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px"
           onclick="$.mobile.back()">Go Back</a>
    </div>
</div>

<div id="dlg1" class="easyui-dialog" style="padding:10px 10px;width:90%;font-size: 16px;"
     data-options="inline:true,modal:true,closed:true,title:'报名'">
    <form id="register" method="post">
        <div>
            <label>姓名：</label>
            <input class="easyui-textbox" name="name" prompt="姓名(必填)" style="width:100%">
        </div>
        <div>
            <label>手机号：</label>
            <input class="easyui-numberbox" name="phone" prompt="手机号(必填)" style="width:100%">
        </div>
        <div>
            <label>验证码：</label>
            <br/>
            <input class="easyui-numberbox" name="smscode" prompt="验证码(必填)" style="width:60%"><a class="easyui-linkbutton c3"
                                                                                  id="send-sms-code-btn"
                                                                                  style="width:35%;margin-left: 10px;height: 30px;">获取验证码</a>
        </div>
        <div>
            <label>邀请码：</label>
            <input class="easyui-numberbox" name="invitecode" prompt="邀请码" style="width:100%">
        </div>
        <!-- <div>
             <label>Volumn</label>
             <input class="easyui-slider" value="10" style="width:100%">
         </div>-->
    </form>
    <div id="hint" style="display: none; margin-top: 10px;">
    </div>
    <div class="dialog-button">
        <a class="easyui-linkbutton" style="width:100%;height:35px"
           onclick="goToLogin()">报名</a>
    </div>
</div>

<script>
    $( function() {

        $("#all-list tr" ).attr('v-for','item in items' ).attr("v-on:click","greet");
        $("#my-list tr" ).attr('v-for','item in items' ).attr("v-on:click","greet");


        $( '#dlg1' ).dialog( 'close' )
        $( ".datagrid-row" ).on('click', function() {
            alert()
            /*var id = $( this ).find( '#detail-id' ).text();
            getDetailById( id );

            $.mobile.go( '#p2' );*/
        } )
        $( "#p2 .tabs-first" ).click( function() {
            signUp();
            //$( '#dlg1' ).dialog( 'open' ).dialog( 'center' )
            //window.location.href="?s=/addon/Reserve/Wap/index/reserve_id/1/publicid/2.html&publicid=2&openid=-2"
        } )
        $( "#p2 .tabs-last" ).click( function() {
            //$.mobile.go( '#p3' )
            //window.location.href="?s=/addon/Reserve/Wap/index/reserve_id/1/publicid/2.html&publicid=2&openid=-2"
        } )
        $( "#send-sms-code-btn" ).click( function() {
            sendSMSCode();
        } )

        setInterval( function() {
            if( window.location.href.split( '#&' )[ 1 ] != 'p2' ) {
                //console.info('close');
                $( '#dlg1' ).dialog( 'close' );
            }
        }, 100 )

    } )
    function getAllLists()
    {
        getListData(function(data){
            new Vue({
                el: '#all-list',
                data: {
                    items: data
                },
                methods: {
                    greet: function (event) {
                        $('.datagrid-btable tr' ).removeClass('datagrid-row-selected');
                        var id = $(event.currentTarget ).addClass('datagrid-row-selected').find('#detail-id').text();
                        getDetailById( id );
                        $.mobile.go( '#p2' );
                    }
                }
            })
        })
    }
    function getMyLists()
    {
        getListData(function(data){
            new Vue({
                el: '#my-list',
                data: {
                    items: data
                },
                methods: {
                    greet: function (event) {
                        $('.datagrid-btable tr' ).removeClass('datagrid-row-selected');
                        var id = $(event.currentTarget ).addClass('datagrid-row-selected').find('#detail-id').text();
                        getDetailById( id );
                        $.mobile.go( '#p2' );
                    }
                }
            })
        })
    }
    getAllLists();
    function getListData(callBack)
    {
        $.get("?s=/addon/WeiSite/WeiSite/lists/cate_id/1/data/data.html",{},function(data){
            console.info(data.list_data[0 ].id)
            console.info(data.list_data[0 ].title)
            callBack(data.list_data)

        },'json')
    }
    function getDetailById( id ) {
        $.get( "{:U('detail')}", { id: id }, function( data ) {
            if( typeof (data.cover) != "undefined" ) {
                $( "#p2-pic-url img" ).attr( 'src', data.cover );
            }
            else {
                $( "#p2-pic-url" ).html( '' );
            }
            $( "#p2-title" ).text( data.title );
            $( '#p2-content' ).html( data.content );
            $( '#p2-start-time' ).text( data.start_time + "~" + data.end_time );
            $( '#p2-author' ).text( data.author );
            $( '#course-id' ).text( data.id );

        }, 'json' )
    }
    var register_tag=false;
    function isRegistered(callBack)
    {
        $.post("{:U('exitIsRegistered')}",{},function(data){
            callBack(data);
        },'json')
    }
    function signUp()
    {
        isRegistered(function(data){
            if(!data.isok)
            {
                $( '#dlg1' ).dialog( 'open' ).dialog( 'center' );
            }else{
                goToLogin()
            }
        })


    }
    function goToLogin() {


        $( '#register' ).form( 'submit', {
            url     : "{:U('baoming')}",
            onSubmit: function() {
            },
            queryParams:{course_id:$("#course-id").text()},
            success : function( data ) {
                var data = eval('(' + data + ')');
                if(!data.isok){
                    return hintMsg(data.msg,false);
                }
                $( '#dlg1' ).dialog( 'close' );
                alert('报名成功')
                $.mobile.go( '#p3' );
                /*$("#go-to-apply" ).parents('li' ).remove();
                $("#click-enter" ).parents('li' ).addClass('tabs-selected tabs-first' );*/
            }
        } );

        /*$( '#dlg1' ).dialog( 'close' );
        $.mobile.go( '#p3' )*/
    }
    function sendSMSCode() {
        var phone = $.trim( $( "input[name=phone]" ).val() );
        return hintMsg('验证码已经发送',true);
        /*$.post('url',{phone:phone},function(data){
         alert();
         })*/

    }
    function hintMsg(msg,isok){
        var str='<span style="color:#238E23">'+msg+'</span>';
        if(!isok){
            str='<span style="color:#FF0000 ">'+msg+'</span>';
        }

        $( "#hint" ).html( str ).stop().fadeIn( 100 ).delay( 1000 ).fadeOut( 400 );
    }
</script>

</body>
</html>